<html>
<head>

<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../js/plugin/jquery-jtemplates.js" type="text/javascript"></script>
<script src="../js/customfunctions.js" type='text/javascript'></script>
<script src="../js/plugin/jquery-ui-1.8.12.custom.min.js"
	type='text/javascript'></script>
<script src="../js/plugin/jquery.bgiframe-2.1.2.js" type='text/javascript'></script>
<script src="../js/plugin/jquery.validate.min.js" type='text/javascript'></script>
<script src="../js/plugin/jquery.dataTables.min.js" type='text/javascript'></script>

<link href="../css/jquery/jquery.ui.all.css" rel="stylesheet"></link>
<link href="../css/jquery/jquery.ui.dialog.css" rel="stylesheet"></link>

<script>
	$(document).ready(function() {
		$.getJSON("/hnl/LoadAllTalent.do", function(data) {
			updatepage(data);
		});
	});

	function updatepage(sjson) {
		// Set URL of the template. Setting filter_data to false - prevents HTML encode 
		$('#result').setTemplateURL('/hnl/template/talentTableTemplate2.jsp',
				[], {
					filter_data : false
				});
		$('#result').processTemplate(sjson);

		$('#allListTemplate').dataTable({
			"bJQueryUI" : true,
			"sPaginationType" : "full_numbers"
		});
	}
</script>

<style>
.paging_two_button .ui-button {
	FLOAT: left;
	CURSOR: pointer
}

.paging_full_numbers .ui-button {
	PADDING-BOTTOM: 2px;
	MARGIN: 0px;
	PADDING-LEFT: 6px;
	PADDING-RIGHT: 6px;
	CURSOR: pointer;
	PADDING-TOP: 2px
}

.dataTables_paginate .ui-button {
	MARGIN-RIGHT: -0.1em !important
}

.paging_full_numbers {
	WIDTH: 350px !important
}

.dataTables_wrapper .ui-toolbar {
	PADDING-BOTTOM: 5px;
	PADDING-LEFT: 5px;
	PADDING-RIGHT: 5px;
	PADDING-TOP: 5px
}

.dataTables_paginate {
	WIDTH: auto
}

.dataTables_info {
	PADDING-TOP: 3px
}

TABLE.display THEAD TH {
	PADDING-BOTTOM: 3px;
	PADDING-LEFT: 10px;
	PADDING-RIGHT: 0px;
	CURSOR: pointer;
	PADDING-TOP: 3px
}

DIV.dataTables_wrapper .ui-widget-header {
	FONT-WEIGHT: normal
}

TABLE.display THEAD TH DIV.DataTables_sort_wrapper {
	POSITION: relative;
	PADDING-RIGHT: 20px
}

TABLE.display THEAD TH DIV.DataTables_sort_wrapper SPAN {
	POSITION: absolute;
	MARGIN-TOP: -8px;
	TOP: 50%;
	RIGHT: 0px
}

.dataTables_wrapper {
	POSITION: relative;
	MIN-HEIGHT: 302px;
	CLEAR: both;
	_height: 302px
}

.dataTables_processing {
	BORDER-BOTTOM: #ddd 1px solid;
	POSITION: absolute;
	TEXT-ALIGN: center;
	BORDER-LEFT: #ddd 1px solid;
	PADDING-BOTTOM: 2px;
	PADDING-LEFT: 0px;
	WIDTH: 250px;
	PADDING-RIGHT: 0px;
	COLOR: #999;
	MARGIN-LEFT: -125px;
	FONT-SIZE: 11px;
	BORDER-TOP: #ddd 1px solid;
	TOP: 0px;
	BORDER-RIGHT: #ddd 1px solid;
	PADDING-TOP: 2px;
	LEFT: 50%
}

.dataTables_length {
	WIDTH: 40%;
	FLOAT: left
}

.dataTables_filter {
	TEXT-ALIGN: right;
	WIDTH: 50%;
	FLOAT: right
}

.dataTables_info {
	WIDTH: 50%;
	FLOAT: left
}

.dataTables_paginate {
	TEXT-ALIGN: right;
	FLOAT: right
}

.paginate_disabled_previous {
	WIDTH: 19px;
	FLOAT: left;
	HEIGHT: 19px;
	MARGIN-LEFT: 3px
}

.paginate_enabled_previous {
	WIDTH: 19px;
	FLOAT: left;
	HEIGHT: 19px;
	MARGIN-LEFT: 3px
}

.paginate_disabled_next {
	WIDTH: 19px;
	FLOAT: left;
	HEIGHT: 19px;
	MARGIN-LEFT: 3px
}

.paginate_enabled_next {
	WIDTH: 19px;
	FLOAT: left;
	HEIGHT: 19px;
	MARGIN-LEFT: 3px
}

.paginate_disabled_previous {
	BACKGROUND-IMAGE: url(../images/back_disabled.jpg)
}

.paginate_enabled_previous {
	BACKGROUND-IMAGE: url(../images/back_enabled.jpg)
}

.paginate_disabled_next {
	BACKGROUND-IMAGE: url(../images/forward_disabled.jpg)
}

.paginate_enabled_next {
	BACKGROUND-IMAGE: url(../images/forward_enabled.jpg)
}

TABLE.display {
	MARGIN: 0px auto;
	WIDTH: 100%;
	BORDER-COLLAPSE: collapse;
	CLEAR: both
}

TABLE.display TFOOT TH {
	PADDING-BOTTOM: 3px;
	PADDING-LEFT: 10px;
	PADDING-RIGHT: 0px;
	FONT-WEIGHT: normal;
	PADDING-TOP: 3px
}

TABLE.display TR.heading2 TD {
	BORDER-BOTTOM: #aaa 1px solid
}

TABLE.display TD {
	PADDING-BOTTOM: 3px;
	PADDING-LEFT: 10px;
	PADDING-RIGHT: 10px;
	PADDING-TOP: 3px
}

TABLE.display TD.center {
	TEXT-ALIGN: center
}
</style>

</head>
<body>
	<fieldset>
		<legend>Please See Table Below</legend>
		<div id="result"></div>
	</fieldset>
</body>
</html>
